<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas id="c1" width="800" height="600"></canvas>

    <script>
        /** @type {HTMLCanvasElement} */
        let c1 = document.getElementById("c1")
        let ctx = c1.getContext("2d")
        function render() {
            ctx.clearRect(0, 0, 800, 600)
            ctx.save()
            ctx.translate(400, 300)
            ctx.rotate(-Math.PI / 2)

            ctx.save()
            for (let i = 0; i < 12; i++) {
                // 绘制小时线
                ctx.beginPath()
                ctx.moveTo(170, 0)
                ctx.lineTo(190, 0)
                ctx.lineWidth = 6
                ctx.stroke()
                ctx.closePath()
                ctx.rotate(2 * Math.PI / 12)
            }
            ctx.restore()

            ctx.save()
            for (let i = 0; i < 60; i++) {
                // 绘制分钟线
                ctx.beginPath()
                ctx.moveTo(180, 0)
                ctx.lineTo(190, 0)
                ctx.stroke()
                ctx.closePath()
                ctx.rotate(2 * Math.PI / 60)
            }
            ctx.restore()

            // 获取时间
            let time = new Date()
            let hour = time.getHours() % 12,
                min = time.getMinutes(),
                sec = time.getSeconds()

            // 绘制秒针
            ctx.save()
            ctx.rotate(2 * Math.PI * sec / 60)
            ctx.beginPath()
            ctx.moveTo(0, 0)
            ctx.lineTo(180, 0)
            ctx.strokeStyle = "red"
            ctx.stroke()
            ctx.closePath()
            ctx.restore()

            // 绘制分针
            ctx.save()
            // 分针同时受到分钟数和秒钟数的影响
            ctx.rotate(2 * Math.PI * min / 60 + 2 * Math.PI * sec / 3600)
            ctx.beginPath()
            ctx.moveTo(0, 0)
            ctx.lineTo(140, 0)
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4
            ctx.stroke()
            ctx.closePath()
            ctx.restore()

            // 绘制时针
            ctx.save()
            ctx.rotate(2 * Math.PI * hour / 12 + 2 * Math.PI * min / 60 / 12 + 2 * Math.PI * sec / 3600 / 12)
            ctx.beginPath()
            ctx.moveTo(0, 0)
            ctx.lineTo(80, 0)
            ctx.strokeStyle = "green"
            ctx.lineWidth = 8
            ctx.stroke()
            ctx.closePath()
            ctx.restore()

            // 绘制中心原点
            ctx.beginPath()
            ctx.arc(0, 0, 8, 0, 2 * Math.PI)
            ctx.fill()
            ctx.closePath()

            // 恢复第一次修改
            ctx.restore()
            
            requestAnimationFrame(render)
        }

        render()
    </script>
</body>

</html>